<template>
    <view class="flex-col homepage">
        <view class="flex-col wrapper">
            <view class="flex-row wraper-row">
                <view class="u-line-1 text">费用类型</view>
                <view class="u-line-1 text-two">{{msg.source}}费</view>
            </view>
            <u-line class="line" margin="0rpx 0rpx 30rpx 0rpx"></u-line>
            <view class="flex-row wraper-row">
                <view class="u-line-1 text">就诊科室</view>
                <view class="u-line-1 text-two">{{msg.divisionName}}</view>
            </view>
            <u-line class="line" margin="0rpx 0rpx 30rpx 0rpx"></u-line>
            <view class="flex-row wraper-row">
                <view class="u-line-1 text">医生姓名</view>
                <view class="u-line-1 text-two">{{msg.doctorName}}</view>
            </view>
            <u-line class="line" margin="0rpx 0rpx 30rpx 0rpx"></u-line>
            <view class="flex-row wraper-row">
                <view class="u-line-1 text" style=" letter-spacing: 8px;">就诊人</view>
                <view class="u-line-1 text-two">{{msg.name}}</view>
            </view>
            <u-line class="line" margin="0rpx 0rpx 30rpx 0rpx"></u-line>
            <view class="flex-row wraper-row-two">
                <view class="u-line-1 text">身份证号</view>
                <view class="u-line-1 text-two">{{msg.number}}</view>
            </view>
            <view class="u-line-1 text-three"></view>
        </view>
        <view class="flex-col wrapper-two">
            <view class="u-line-1 text-four">费用明细</view>
<!--            <u-line class="line" margin="0rpx 0rpx 14rpx 0rpx"></u-line>
            <view class="flex-row wraper-row-three">
                <view class="flex-col flex-row box">
                    <view class="u-line-1 text-five">普罗布考片</view>
                    <view class="u-line-1 text-six">单价：￥50.00 数量：3</view>
                </view>
                <view class="u-line-1 text-seven">￥150.00</view>
            </view> -->
            <u-line class="line" margin="0rpx 0rpx 20rpx 0rpx"></u-line>
            <view class="flex-row wraper-row-four">
                <view class="flex-col flex-row box">
                    <view class="u-line-1 text-eight" v-if="!!detail.drugs">{{detail.drugs.drugsName}}</view>
                    <view class="u-line-1 text-nine" v-if="!!detail.drugs">单价：￥{{detail.drugs.drugsPrice}} 数量：{{detail.useNumber}}</view>
                </view>
                <view class="u-line-1 text-ten">￥{{detail.price}}</view>
            </view>
        </view>
        <view class="flex-col wrapper-three">
            <view class="u-line-1 text-eleven">支付方式</view>
            <view class="u-line-1 text-twelve">余额</view>
            <u-line class="line" margin="0rpx 0rpx 30rpx 0rpx"></u-line>
            <view class="u-line-1 text-thirteen">卡内余额</view>
            <view class="flex-row wraper-row-five">
                <view class="flex-row box-two">
                    <view class="u-line-1 text-fourteen">{{msg.balance}}</view>
                    <view class="flex-row box-row" @click="skype">
                        <view class="u-line-1 text-fifteen">去充值</view>
                        <u-icon class="icon-arrow-right" name="arrow-right" color="#d7d7d7"></u-icon>
                    </view>
                </view>
            </view>
        </view>
        <view class="flex-row wrapper-four">
            <view class="u-line-1 text-sixteen">合计：</view>
            <view class="flex-row wraper-col" @click="payment">
                <view class="u-line-1 text-seventeen">扣款缴费</view>
                <view class="u-line-1 text-eighteen">{{detail.price}}</view>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
				URL: 'http://localhost:9000/', //主域名
				msg:'',
				detail:'',
			}
        },
        methods: {
			
			//缴费
			payment(){
				console.log(this.msg.id)
				uni.request({
					url:this.URL+"record/record/drug-record/payment/"+ this.msg.id + "/" + this.msg.cardId,
					method:"GET",
					success: (res) => {
						console.log(res)
						if(res.data.code == 20000){
							uni.request({
								url:this.URL+"user/user/patient-card/payment/"+ this.msg.cardNo + "/" + this.detail.price,
								method:"GET",
								success: (res1) => {
									console.log(res1)
									if(res1.data.code == 20000){
										uni.navigateTo({
											url:'selfPay'
										})
									}
								}
							})
						}
					}
				})
				
			},
			
			//就诊卡充值
			skype(){
				uni.navigateTo({
					url:'menzhenchongzhi?panId='+this.msg.panId
				})
			},
			
			payDetail(id){
				uni.request({
					url: this.URL + "record/record/drug-record/payDetail/" + id,
					method:"GET",
					success: (res) => {
						if (res.data.code = 20000) {
							this.detail = res.data.data.detail
						}
						console.log("detail" , this.detail)
					}
				})
			}
        },
		onLoad(res) {
			console.log(JSON.parse(res.msg))
			this.msg = JSON.parse(res.msg)
			console.log(this.msg)
			this.payDetail(this.msg.id)
		}
    }
</script>
<style lang="scss" scoped>
    /** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

    html,
    body {
        margin: 0;
        width: 100%;
        height: 100%;
        font-size: 16px
    }

    view,
    text,
    image {
        position: relative;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .flex-col {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    .flex-row {
        display: flex;
        align-items: flex-start;
    }

    .flex-col .flex-row {
        width: 100%
    }

    /** 全局样式-结束*/

    .homepage {
        padding: 40rpx 32rpx 0rpx 32rpx;
        border-width: 30rpx;
        border-top-color: #aaaaa;

        .wrapper {
            width: 100%;
            margin-bottom: 40rpx;
            padding: 30rpx 0rpx 44rpx 22rpx;
            background: #ffffff;

            .wraper-row {
                width: 656rpx;
                justify-content: space-between;
                margin: 0rpx 0rpx 30rpx 8rpx;

                .text {
                    width: 140rpx;
                    font-size: 32rpx;
                    color: #b2b1b2;
                }

                .text-two {
                    width: 510rpx;
                    font-size: 32rpx;
                }
            }

            .line {
                width: 642rpx;
            }

            .wraper-row {
                width: 656rpx;
                justify-content: space-between;
                margin: 0rpx 0rpx 30rpx 8rpx;

                .text-three {
                    bottom: 182rpx;
                    left: -32rpx;
                    position: absolute;
                }

                .text-four {
                    width: 140rpx;
                    margin: 0rpx 0rpx 30rpx 8rpx;
                    font-size: 32rpx;
                    color: #b2b1b2;
                }
            }

            .wraper-row-two {
                width: 656rpx;
                justify-content: space-between;
                margin-left: 8rpx;

                .text {
                    width: 140rpx;
                    font-size: 32rpx;
                    color: #b2b1b2;
                }

                .text-two {
                    width: 510rpx;
                    font-size: 32rpx;
                }
            }

            .text-three {
                bottom: 182rpx;
                left: -32rpx;
                position: absolute;
            }
        }

        .wrapper-two {
            width: 100%;
            margin-bottom: 32rpx;
            padding: 30rpx 0rpx 30rpx 22rpx;
            background: #ffffff;

            .text-four {
                width: 140rpx;
                margin: 0rpx 0rpx 30rpx 8rpx;
                font-size: 32rpx;
                color: #b2b1b2;
            }

            .line {
                width: 642rpx;
            }

            .wraper-row-three {
                width: 656rpx;
                justify-content: space-between;
                margin: 0rpx 0rpx 20rpx 8rpx;

                .box {
                    width: 370rpx;

                    .text-five {
                        width: 158rpx;
                        margin-bottom: 20rpx;
                    }

                    .text-six {
                        width: 100%;
                        font-size: 2rpx;
                        color: #aaaaaa;
                    }
                }

                .text-seven {
                    width: 150rpx;
                    margin-top: 26rpx;
                }
            }

            .wraper-row-four {
                width: 656rpx;
                justify-content: space-between;
                margin-left: 8rpx;

                .box {
                    width: 370rpx;

                    .text-eight {
                        width: 158rpx;
                        margin-bottom: 20rpx;
                    }

                    .text-nine {
                        width: 100%;
                        font-size: 2rpx;
                        color: #aaaaaa;
                    }
                }

                .text-ten {
                    width: 150rpx;
                    margin-top: 26rpx;
                }
            }
        }

        .wrapper-three {
            width: 100%;
            margin-bottom: 60rpx;
            padding: 30rpx 0rpx 40rpx 22rpx;
            background: #ffffff;

            .text-eleven {
                width: 140rpx;
                margin: 0rpx 0rpx -38rpx 8rpx;
                font-size: 32rpx;
                color: #b2b1b2;
            }

            .text-twelve {
                width: 510rpx;
                margin: 0rpx 0rpx 30rpx 154rpx;
                font-size: 32rpx;
            }

            .line {
                width: 642rpx;
            }

            .text-thirteen {
                width: 140rpx;
                margin: 0rpx 0rpx -38rpx 8rpx;
                font-size: 32rpx;
                color: #b2b1b2;
            }

            .wraper-row-five {
                width: 510rpx;
                margin-left: 154rpx;

                .box-two {
                    width: 510rpx;

                    .text-fourteen {
                        width: 100%;
                        font-size: 32rpx;
                    }

                    .box-row {
                        width: 164rpx;
                        top: 10rpx;
                        right: 10rpx;
                        position: absolute;

                        .text-fifteen {
                            width: 100%;
                            position: absolute;
                            color: absolute-0;
							color: #006eff;
                        }

                        .icon-arrow-right {
                            top: 4rpx;
                            right: 30rpx;
                            position: absolute;
                        }
                    }
                }
            }
        }

        .wrapper-four {
            width: 686rpx;
            justify-content: space-between;
            padding-left: 38rpx;
            background: #ffffff;

            .text-sixteen {
                width: 88rpx;
                margin-top: 40rpx;
                font-size: 28rpx;
            }

            .wraper-col {
                width: 364rpx;
                justify-content: center;
                padding: 40rpx 0rpx;
                background: #006eff;

                .text-seventeen {
                    width: 184rpx;
                    font-size: 36rpx;
                    color: #ffffff;
                }

                .text-eighteen {
                    width: 204rpx;
                    top: 40rpx;
                    left: -196rpx;
                    font-size: 32rpx;
                    position: absolute;
                    color: #f46363;
                }
            }
        }
    }
</style>